import React, { Component, Fragment } from 'react'
import Header from '../components/Common/Header/Header'
import Footer from '../components/Common/Footer/Footer'
//第一种
//import LeftNav from '../components/Common/Left/Left'
//第二种
//import LeftNav from '../components/Common/Left2/Left2'
//第三种
//import LeftNav from '../components/Common/Left3/Left3'
//第四种
import LeftNav from '../components/Common/Left4/Left4'
import { Row, Col } from 'antd'
import { connect } from 'react-redux'
class Admin extends Component {
  constructor(props) {
    super(props)
    this.state = {
      message: 'admin页面',
    }
  }
  componentDidMount() {}
  render() {
    const { menuColSpan } = this.props
    return (
      <Fragment>
        <Row>
          <Col span={menuColSpan.left} style={{ background: '#001529' }}>
            <LeftNav></LeftNav>
          </Col>

          <Col span={menuColSpan.right} style={{ background: '#f1f3f5' }}>
            <Header></Header>
            {this.props.children}
            <Footer></Footer>
          </Col>
        </Row>
      </Fragment>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    menuColSpan: state.menuColSpan,
  }
}
const mapDispatchToProps = (dispatch) => {
  return {}
}
//最后利用store挂钩

export default connect(
  mapStateToProps, //这里面放的是数据
  mapDispatchToProps //里面放的是操作的数据的方法
)(Admin)
